
// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

/* 完成文字内容的渲染 */
  function getBook () {
    axios.get(
      "http://api-breakingnews-web.itheima.net/my/article/cates",
      {headers:{Authorization:localStorage.getItem("token")}}
    ).then(({data:res})=>{
      $("tbody").empty()
      // console.log(res);
      if(res.status===0) {
        res.data.forEach(obj=>{
          let theTr=` <tr>
          <td>${obj.name}</td>
          <td>${obj.alias}</td>
          <td>
            <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
            <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
          </td>
        </tr>`
        $("tbody").append(theTr)
        })
      }
    })
  }

  getBook ()


/* 完成添加功能 */
$(".add").on("click",function () {
   const index=layer.open({
    area: ['500px', '300px'],
    title: '文章类别',
    content: add_str,
    success:function () {
      $(".add-form").on("submit",function (e) {
        e.preventDefault()
        axios.post(
          "http://api-breakingnews-web.itheima.net/my/article/addcates",
          $(".add-form").serialize(),
          {headers:{Authorization:localStorage.getItem("token")}})  //身份验证信息,需要放置在后面
      .then(({data:res})=>{
        layer.msg(res.message)
        if(res.status===0) {
          //关闭弹框
          layer.close(index)
          getBook ()
        }
      })
      })
    }
  });     
})


/* 完成删除功能
1.页面重行渲染,使用委托事件,注册点击事件
2.查询文档,删除需要ID属性,可以获取到点击的ID参数
3.获取数据后,发起请求==>请求成功后,重新渲染页面 */
$("tbody").on("click",".delete",function () {
  const id=$(this).attr("myid")   //url地址,难道是因为-号
  console.log(id);
  axios.get(`http://api-breakingnews-web.itheima.net/my/article/deletecate/${id}`, {headers:{Authorization:localStorage.getItem("token")}}).then(({data:res})=>{
    console.log(res);
    layer.msg(res.message)
    if(res.status===0) {
      // getBook ()
      $(this).parents("tr").remove()    //这里直接移出,不适用渲染,好处是可以节省一次请求==节省服务器性能
    }
  })
})

// 完成编辑功能
$("tbody").on("click",".edit",function () {
  // 显示出来弹框
  const index=layer.open({
    area: ['500px', '300px'],
    title: '编辑类别',
    content: edit_str,
  })
  //将数据渲染到输入框中
  let name=$(this).attr("data-name")
  let alias=$(this).attr("data-alias")
  let Id=$(this).attr("myid")
  //方法1
  // $(`input[name="name"]`).val(name)
  // $(`input[name="alias"]`).val(alias)

  //方法2===>使用layer 提供的方法
  form.val("edit",{
    name,alias,Id
  })

  //完成确认修改功能
  /* 1.注册submit事件
  2.发送请求 */
  $("#edit_form").on("submit",function (e) {
    e.preventDefault()
    axios.post(
      "http://api-breakingnews-web.itheima.net/my/article/updatecate",
      $("#edit_form").serialize(),
      {headers:{Authorization:localStorage.getItem("token")}}).
      then(({data:res})=>{
        getBook ()
        layer.msg(res.message)
        //修改成功后,需要将表单弹出框隐藏
        layer.close(index)
      })
  })
})

// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;


//完成表单的效验
const form = layui.form;
form.verify({
    ctname: [
        /^[\u4E00-\u9FA5]+$/,
        "分类名只能是中文"
    ],
    aliname: [
        /^[a-z0-9]+$/,
        "小写英文和数字组成"
    ]
})        
        
